<%--
  Created by IntelliJ IDEA.
  User: zhaocan
  Date: 2018/4/25
  Time: 15:14
  To change this template use File | Settings | File Templates.
  呼叫中心话务条-与呼叫系统对接
--%>
<%@ include file="/WEB-INF/pages/common/meta.jsp"%>
<%@include file="/WEB-INF/pages/common/common.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style type="text/css">
    #info{font-family: "微软雅黑", "宋体", "Arial",  "Verdana", "sans-serif";font-size:12px;float:rgiht;color:#fff;margin:0 15px 0 0;text-align:right;}
    #info li{display:block;float:left;color:#fff;line-height:16px;margin-right:12px;}

    .info{font-family: "微软雅黑", "宋体", "Arial",  "Verdana", "sans-serif";font-size:12px;float:left;color:#fff;margin-top: 20px;/* text-align:right; */}
    .info li{display:block;color:#fff;line-height:20px;}
    .rightTipsBaseMess{top:-10px;position:absolute;margin-left: 580px;}
</style>
<html>
<head>
    <title>呼叫中心话务条</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link class="css" rel="stylesheet" href="${ctx}/callcenter/phone2/css/tips.css"/>
</head>
<body>

<div>
    <!--呼叫系统start-->
  <div class="rightTipsStatus">
        <div class="box">
            <h4 >状态：<a id="callStatus">未连接</a>&nbsp;&nbsp;排队：<a id="queueInfo">0人</a></h4>
            <%--<h4 class="t2">排队：<a id="queueInfo">0人</a></h4>--%>
        </div>
    </div>
    <div class="rightTipsBaseMess">
        <ul class="info" style="padding: 0px 0px 0px 40px !important;">
            <li>分机号：<label id="Bar_AgentId"></label></li>
            <li>话务员：<label id="Bar_AgentName"></label></li>
        </ul>
        <ul class="info" style="padding: 0px 0px 0px 40px !important;">
            <li>通话时长：<label id="Bar_TalkTime">00:00:00</label></li>
            <li>总&nbsp;&nbsp;时&nbsp;长：<label id="Bar_totalTalkTime">00:00:00</label></li>
        </ul>
        <ul class="info" style="padding: 0px 0px 0px 40px !important;">
            <li>呼入/呼出：<label id="Bar_CallCnt">0/0</label></li>
            <li>来电&nbsp;号码：<label id="Bar_CallInNUm"></label></li>
        </ul>
    </div>
    <ul class="s-tips" style="padding: 0px 0px 0px 40px !important;">
       <%-- <li class="gray zhuce" id="zhuce" >
            <em></em>
            <span>注册</span>
        </li>
        <li class="logout" id="logout" >
            <em></em>
            <span>注销</span>
        </li>--%>
        <li class="gray banzhang" id="banzhang">
            <em></em>
            <span>班长</span>
        </li>
        <li class="gray hujiao" id="hujiao">
            <em></em>
            <span>快速呼叫</span>
        </li>
       <%-- <li class="gray zhuanjie" id="zhuanjie">
            <em></em>
            <span>转接</span>
        </li>--%>
        <li class="gray shimang" id="shimang">
            <em></em>
            <span>暂停</span>
        </li>
        <li class="gray shixian" id="shixian">
            <em></em>
            <span>恢复</span>
        </li>
       <%-- <li class="gray sanfang" id="sanfang">
            <em></em>
            <span>三方通话</span>
        </li>--%>
        <li class="gray guanduan" id="guanduan">
            <em></em>
            <span>挂断</span>
        </li>
        <li class="gray baochi" id="baochi">
            <em></em>
            <span>电话保持</span>
        </li>
        <li class="jietong" id="jietong">
            <em></em>
            <span>电话接通</span>
        </li>
        <%--<li class="gray zhijian" id="zhijian">
            <em></em>
            <span>互联互通</span>
        </li>--%>
           <input type="text"id="callout_number" placeholder=" 请输入电话号码" style="width:150px;height:25px;margin-left:5px;margin-top:30px;">
        <!--autoLogout-->
       <li id="autoLogout" style="display:none" >
       </li>
    </ul>
    <%--<ul id="info">--%>
        <%--<li>姓名：<label id="Bar_AgentName"></label></li>--%>
        <%--<li>工号：<label id="Bar_AgentId"></label></li>--%>
       <%--&lt;%&ndash; <li>注册时间：<label id="Bar_WorkTime"></label></li>--%>
        <%--<li>登录组：<label id="Bar_LoginGroups"></label></li>&ndash;%&gt;--%>
        <%--<li>来电号码：<label id="Bar_CallInNUm"></label></li>--%>
        <%--<li>通话时长：<label id="Bar_TalkTime">00:00:00</label></li>--%>
        <%--<li>呼入/呼出数：<label id="Bar_CallCnt">0/0</label></li>--%>
        <%--<li>累计通话时长：<label id="Bar_totalTalkTime">00:00:00</label></li>--%>
    <%--</ul>--%>
    <div class="s-dialog sanfangTips" style="height:65px;top:0px;">
        <em></em>
        <ul class="s-text">
            <li>
                <label>三方电话:</label>
                <input type="text" placeholder="请输入电话号码" id="sanfang_dial" value="" />
            </li>
            <li id="sanfang_tools1">
                <label></label>
                <input class="btn" type="button" id="sanfang_submit" value="确认" style="width:60px;height:18px;line-height:5px;" />
                <input class="esc" type="button" value="关闭" style="width:60px;height:18px;line-height:5px;"/>
            </li>
            <li id="sanfang_tools2">
                <div>
                    <input class="esc" type="button" value="关闭"  />
                    <input class="btn" type="button"  value="挂断" id="sanfang_onhook" />
                    <input class="btn" type="button"  value="三方" id="sanfang_join" />
                </div>
            </li>
        </ul>
    </div>
    <div class="s-dialog zhuanjieTips">
        <em></em>
        <ul class="s-text">
            <li>
                <label>转接电话:</label>
                <input type="text" placeholder="请输入电话号码" id="zhuanjie_dial" value="" />
            </li>
            <li id="trans_tools1">
                <label></label>
                <input class="btn" type="button" id="zhuanjie_submit" value="确认"/>
                <input class="esc" type="button" value="关闭"  />
            </li>
            <li id="trans_tools2">
                <div>
                    <input class="esc" type="button" value="关闭"  />
                    <input class="btn" type="button"  value="拉回"  id="zhuajie_back"/>
                    <input class="btn" type="button"  value="转接"  id="zhuanjie_confirm"/>
                </div>
            </li>
        </ul>
    </div>
    <div class="s-dialog hujiaoTips" style="height:60px;top:0px;">
       <em></em>
        <ul class="s-text">
            <li>
                <label>被叫电话:</label>
                <input type="text" placeholder="请输入电话号码" id="speed_dial" value=""  />
            </li>
            <li>
                <label></label>
                <input class="btn" type="button" id="hujiao_submit" value="确认" style="width:60px;height:18px;line-height:5px;" />
                <input class="esc" type="button" value="关闭" style="width:60px;height:18px;line-height:5px;" />
            </li>
        </ul>
        <ul id="auxreasons" class="dropdown-menu state_dropdown" style="display: none">
            <li id="readybtn" class="invisable"  style="display: none"><a itemdata="0" href="#"
                                                   style="color:#47a447;font-weight:bold;">就绪</a></li>
        </ul>
        <ul id="#sname" style="display: none"></ul>
    </div>

    <div class="s-dialog logonTips" style="height: 65px;">
        <em></em>
        <div>
            <div style="width:177px;float:left;padding-left:3px;">
                <ul class="zhuceInfo" id="grpList">
                    <!--
                    <li><input type="checkbox" name="checkbox"/><span>A001</span></li>
                    <li><input type="checkbox" name="checkbox"/><span>A002</span></li>
                    <li><input type="checkbox" name="checkbox"/><span>A003</span></li>
                    -->
                </ul>
            </div>
            <div style="width:55px;float:left;padding:5px 0 0 5px;overflow:hidden;">
                <input class="btnZhuce" type="button" value="确认" />
                <input class="escZhuce" type="button" value="关闭" />
            </div>
        </div>

    </div>
    <iframe id="frameB" style="display:none;"></iframe>
    <input id="call_webUrl" type="hidden" value="${webUrl}">
    <input id ="call_agentId" type="hidden" value ="${agentId}">
    <input id ="call_agentName" type="hidden" value ="${agentName}">
    <input id ="call_userCode" type="hidden" value ="${userCode}">
    <input id ="call_agtPwd" type="hidden" value ="${agtPwd}">
    <input id ="call_domain" type="hidden" value ="${domain}">
    <input id ="call_satisfactionDeviceId" type="hidden" value ="${satisfactionDeviceId}">
    <input id ="call_yunhuIp" type="hidden" value ="${yunHuIp}">
    <input id ="call_yunhuIp_listen" type="hidden" value ="${yunHuIpListen}">
    <input id ="call_logout_off" type="hidden" value ="${logOutOFF}">
    <input id ="call_ready_off" type="hidden" value ="${readyOFF}">
    <input id ="call_ready_delay" type="hidden" value ="${readyDelay}">
</div>

    <script src="${ctx}/callcenter/js/plugins/jquery-1.7.2.min.js?v=1.0.1" type="text/javascript"></script>
    <%--<script src="${ctx}/callcenter/js/jquery-1.10.2.min.js?v=1.0.0" type="text/javascript"></script>--%>
    <script src="${ctx}/callcenter/js/plugins/bootstrap3/bootstrap.min.js?v=1.0.1" type="text/javascript"></script>
    <script src="${ctx}/callcenter/js/plugins/jquery.json.min.js?v=1.0.1" type="text/javascript"></script>
    <script src="${ctx}/callcenter/js/plugins/jquery.sdcommon.js?v=1.0.1" type="text/javascript"></script>
    <script src="${ctx}/callcenter/phone2/js/phone.js?v=1.0.3" type="text/javascript"></script>
    <script src="${ctx}/callcenter/phone2/js/event.js?v=1.0.3" type="text/javascript"></script>
    <script src="${ctx}/callcenter/phone2/js/interface.js?v=1.0.3" type="text/javascript"></script>
    <script src="${ctx}/callcenter/phone2/js/init.js?v=1.0.3" type="text/javascript"></script>

    <script type="text/javascript" >
        // 2018-05-19
        // 自动登陆，定时是为了监测权限监听和用户组监听事件执行之后执行；否则可能出现异步，导致权限错误
       /* var interval = setInterval(function(){
            if(phone.isFinishGroups && phone.isFinishRight){
                SdAgent.logon(phone.groupId,phone.station);
                clearInterval(interval);
            }
        },2000);*/

        /**
        //延时执行，自动注册 zhaocan 2018-05-02 start
        setTimeout(autoLogon, 3000);
        //注册
        function  autoLogon() {
            SdAgent.logon(phone.groupId,phone.station);
        }
        //zhaocan 2018-05-02 over
         */
        jQuery.fn.outerHTML = function (s) {
            return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();
        }
        $(".s-tips li").mouseenter(function () {
            if($(this).hasClass("gray")==false){
                $(this).addClass("curr2");
            }
        }).mouseleave(function () {
            $(".s-tips li").removeClass("curr2");
        });
        $(".s-tips li").click(function () {
            if($(this).hasClass("gray")) return;
            $(".s-dialog").hide();
            var top = $(this).offset().top;
            var left = $(this).offset().left;
            $(".headTips").stop(false, true);
            if ($.browser.version == "7.0" || $.browser.version == "6.0") {
                top = top +18;
            }
            if($.browser.msie) {
                $(".s-dialog input").css("line-height","26px");
            }
            if($(this).hasClass("sanfang")){
                $(".sanfangTips").css({ "top": 1 + "px", "left": left - 250, "display": "block" }).animate({ opacity: 1 },1000);
            } else if($(this).hasClass("zhuanjie")){
                $(".zhuanjieTips").css({ "top": 1 + "px", "left": left +80, "display": "block" }).animate({ opacity: 1 },1000);
                $(".zhuanjieTips em").addClass("left");
            }else if($(this).hasClass("hujiao")){
                //2018-05-19：去除tip弹窗获取电话号码方式，改为读取文本框中的电话号码
                 //hujiao();
                _makeCall();
                //tip弹窗输入电话号码方式
                /*$(".hujiaoTips").css({ "top": 1 + "px", "left": left + 60, "display": "block" }).animate({ opacity: 1 },1000);
                $(".hujiaoTips em").addClass("left");*/
            }else if($(this).hasClass("zhuce")){
                $(".logonTips").css({ "top": 1 + "px", "left": left + 60, "display": "block" }).animate({ opacity: 1 },1000);
                $(".logonTips em").addClass("left");
                setLogonGrps();
            }else{
                $(".s-dialog").hide();
            }
            if($(this).hasClass("baochi")){
                //SdAgent.agtHold();
                _holdCall();
                /*(function(){
                    $(".baochi").hide();
                    $('.jietong').show();
                    $(".s-tips li").removeClass("curr");
                    $(".baochi").addClass("curr");
                })*/

            }
            else if($(this).hasClass("jietong")){
                //SdAgent.agtRetrieve();
                _retrieveCall();
                /*(function(){
                    $(".baochi").show();
                    $('.jietong').hide();
                    $(".s-tips li").removeClass("curr");
                    $(".jietong").addClass("curr");
                })*/

            }else{
                $(".s-tips li").removeClass("curr");
                $(this).addClass("curr");
            }
        });
        $(".esc,.escZhuce").click(function(){
            $(this).parents(".s-dialog").hide();
        });

        //注册
        $(".btnZhuce").click(function(){
            if($(this).hasClass("gray")) return;
            var grps = "",grpsSplit="";
            $("#grpList li input").each(function(i){
                if($(this).attr("checked")=="checked") {
                    grps=grps+$(this).attr("groupid");
                    if(grpsSplit!="") grpsSplit=grpsSplit+"|";
                    grpsSplit=grpsSplit+$(this).attr("groupid");
                }
            });
            if(grps==""){
                ztoDialog("message","请选择一个座席组");
                return;
            }
            phone.groupId=grps;
            $.cookies.set("SDLogonGroups", grpsSplit,{expires: 7});
            SdAgent.logon(phone.groupId,phone.station);
            $(this).parents(".s-dialog").hide();
        });

        //注销
        $("#logout").click(function(){
            if($(this).hasClass("gray")) return;
            SdAgent.logout();
        });

        //快速呼叫
        $("#hujiao_submit").click(function(){
            var dialNo = $.trim($("#speed_dial").val());
            if(dialNo=="") return;
            if(phone.agtStatus==3){
                ztoDialog("message","请先注册座席");
                return;
            }
            if(phone.callStatus!=0 || phone.occupy!=0){
                ztoDialog("message","非空闲状态，无法呼叫");
                return;
            }
            SdAgent.dialout(dialNo,"X",0);
        });

        $("#speed_dial").keyup(function(event){
            var dialNo = $.trim($(this).val());
            if(phone.isValidateDNIS(dialNo)==true){
                $("#speed_dial").val(dialNo.replace(/[^\u0000-\u00FF]/ig,""));
            }
            if(event.keyCode==13){
                $("#hujiao_submit").click();
            }
        });

        //转接
        $("#zhuanjie").click(function(){
            if($(this).hasClass("gray")) return;
            phone.openMonitor("zhuanjie");
        });

        $("#zhuanjie_submit").click(function(){
            var dialNo = $("#zhuanjie_dial").val();
            if(dialNo=="") return;
            if(phone.agtStatus==3){
                ztoDialog("message","请先注册座席");
                return;
            }
            if(phone.callStatus!=2){
                ztoDialog("message","非通话状态，无法转接");
                return;
            }
            SdAgent.dialout(dialNo,"X",0);
        });

        $("#zhuanjie_dial").keyup(function(event){
            var dialNo = $.trim($(this).val());
            if(phone.isValidateDNIS(dialNo)==true){
                $("#zhuanjie_dial").val(dialNo.replace(/[^\u0000-\u00FF]/ig,""));
            }
            if(event.keyCode==13){
                $("#zhuanjie_submit").click();
            }
        });

        //三方
        $("#sanfang_submit").click(function(){
            var dialNo = $.trim($("#sanfang_dial").val());
            if(dialNo=="") return;
            if(phone.agtStatus==3){
                ztoDialog("message","请先注册座席");
                return;
            }
            if(phone.callStatus!=2){
                ztoDialog("message","非通话状态，无法转接");
                return;
            }
            SdAgent.dialout(dialNo,"X",0);
        });

        $("#sanfang_dial").keyup(function(event){
            var dialNo = $.trim($(this).val());
            if(phone.isValidateDNIS(dialNo)==true){
                $("#sanfang_dial").val(dialNo.replace(/[^\u0000-\u00FF]/ig,""));
            }
            if(event.keyCode==13){
                $("#sanfang_submit").click();
            }
        });

        //默认注销按钮隐藏
        $(".logout").hide();

        //当前状态，默认示忙
        //$('#shixian').hide();

        //接通  保持的状态   默认保持
        $('.jietong').hide();

        //示忙（暂停）
        $('#shimang').click(function(){
            if($(this).hasClass("gray")) return;
            phone.isPause = true;
            /*SdAgent.pause();
            SdAgent.agtWorkAfterCallOver();*/
            shimang();
        });
        //示闲（恢复）
        $('#shixian').click(function(){
            if($(this).hasClass("gray")) return;
            phone.isPause = false;
            //SdAgent.restore();
            //SdAgent.agtWorkAfterCallOver();
            shixian();
        });
        //挂机
        $(".guanduan,#zhuajie_back,#sanfang_onh_hangupCallook").click(function(){
            //SdAgent.onHook();
            _hangupCall();
        });

        //转接
        $("#zhuanjie_confirm").click(function(){
            SdAgent.dialTrans();
        });

        //三方通话
        $("#sanfang_join").click(function(){
            SdAgent.talkingDialJoin();
        });

        //班长
        $("#banzhang").click(function(){
            if($(this).hasClass("gray")) return;
            getGroups()
//            window.parent.openBzDialog()
        });

        //互联互通
        $("#zhijian").click(function(){
            if($(this).hasClass("gray")) return;
            //SdAgent.agtWorkAfterCallOver();
            //parent.phone.closeAgtMonitor();
            parent.showRemoteCtiDlg(G_CTX_PATH+"/callCenter/phone/frmRemoteCTI?tenantsId=010100899F9BD54BB525C8&myId=010400587ACB6A42332103");
        });

        function ztoDialog(type,data){
            try{
               // alert(type+":"+data);
                //zhaocan 2018-05-02 调用父层提示方法
                if(data == undefined){
                    window.parent.hgalert (type);
                }else{
                    window.parent.hgalert (type+":"+data);
                }

                //parent.Dialog(type,data);
            }catch(e){}
        }

        //从cookies中读取保存的座席组值
        function setLogonGrps(){
            var grpsSplit = $.cookies.get("SDLogonGroups");
            if(grpsSplit!=null && grpsSplit!=""){
                var arrGrps = grpsSplit.split("|");
                for(var i=0;i<arrGrps.length;i++){
                    $("#grpList li input[groupid='"+arrGrps[i]+"']").attr("checked","checked");
                }
            }

        }

        function setAgtCountInfo(agentId,workTime,loginGroups,talkTime,callCnt,totalTalkTime,agentName,CallInNum){
            $("#Bar_AgentId").html(agentId);//坐席工号
            $("#Bar_WorkTime").html(workTime);//注册时间
            $("#Bar_LoginGroups").html(loginGroups);//登陆组
            $("#Bar_TalkTime").html(talkTime);//通话时长
            $("#Bar_CallCnt").html(callCnt);//通话数
            $("#Bar_totalTalkTime").html(totalTalkTime);//通话总时长
            $("#Bar_AgentName").html(agentName);//坐席姓名
            $("#Bar_CallInNUm").html(CallInNum);//来电号码
        }

        /**
         * zhaocan
         * 2018-04-27
         * 登陆
         * 登陆时页面加载嵌入话务条时，自动触发注册方法。
         *
         * 退出
         * 父页面在退出时调用子页面的退出方法
         * 供系统最外层主页调用
         * $("#frmPhone").contents().find("#autoLogout")[0].click();
         * //注销
         $("#autoLogout").click(function(){
            SdAgent.logout();
         });
         * */


    </script>
    <!--呼叫系统end-->
</body>

</html>
